<template>
	<view class="serveDetail">
		<image :src="pageData.image" style="width: 750rpx;height: 750rpx;" mode=""></image>
		<view class="message">
			<view class="name">
				{{pageData.sname}}
			</view>
			<view class="desc">
				{{pageData.introduction}}
			</view>
		</view>
	<!-- 	<view v-if="pageData.stype == 1" class="">
			<view v-if="pageData.is_vip==0" class="serveShop">
				<u-icon size="20" name="integral-fill" color="#FFCF00"></u-icon>
				<view class="" style="margin-left: 20rpx;">
					开通会员 可永久免费使用该项目
				</view>
				<image :src="imaurl+'c3.png'" style="width: 32rpx;height: 32rpx;margin-left: 100rpx;" mode="">
				</image>
			</view>
			<view v-else class="serveShop" style="background-color: #ffffff;">
				<view class="">
					您是尊贵的会员，可以免费使用该服务
				</view>
			</view>
		</view> -->

		<!-- <view class="servetext">
			您是尊贵的会员，可以免费使用该服务
		</view> -->

		<view class="serveFG">
			<view class="heng"></view>
			<view class="">
				服务详情
			</view>
			<view class="heng"></view>
		</view>

		<view class="" style="width: 100%;height: 100%;padding: 30rpx;box-sizing: border-box;">
			<u-parse :content="pageData.content"></u-parse>
		</view>


		<view class="" style="height: 200rpx;"></view>

		<view class="bottomBtn">
			<view v-if="pageData.is_vip == 0" class="left">
				<view class="text">
					{{pageData.weight}}次
				</view>
				<view class="price">
					￥{{pageData.price}}
				</view>
			</view>
			<view v-else class="left">
				<view class="text">
					<!-- {{pageData.weight}}次 -->
				</view>
				<view class="price">
					￥0.00
				</view>
			</view>
			<view class="btns" @click="handleBuy">
				立即购买
			</view>
		</view>

	</view>

</template>

<script>
	import {
		serviceinfo
	} from "@/api/api.js"
	export default {
		data() {
			return {
				pageId: "",
				pageData: {},
				imaurl: "https://szgb.tongchengbang.cc/img/image/",
			}
		},
		onLoad(options) {
			this.pageId = options.id
			this.handleServeDetail()
		},
		methods: {
			async handleServeDetail() {
				let res = await serviceinfo({
					id: this.pageId
				})
				this.pageData = res.data
			},

			handleBuy() {
				uni.navigateTo({
					url: `./confirmOrder?id=${this.pageId}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.bottomBtn {
		width: 100%;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		padding: 16rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS 设备 */
		padding-bottom: env(safe-area-inset-bottom);

		.left {
			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 28rpx;
			}

			.price {
				font-family: DIN, DIN;
				font-weight: 600;
				font-size: 32rpx;
				color: #E40700;
				line-height: 38rpx;
			}
		}

		.btns {
			width: 440rpx;
			height: 84rpx;
			background: #00BF52;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			text-align: center;
		}
	}

	.serveDetail {
		width: 100%;
		min-height: 100%;
		background-color: #ffffff;

		.message {
			width: 100%;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
				line-height: 38rpx;
			}

			.desc {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 33rpx;
				margin-top: 20rpx;
			}
		}

		.serveShop {
			width: 690rpx;
			height: 80rpx;
			background: rgba(255, 207, 0, 0.2);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #E8A700;
			line-height: 33rpx;
			margin-bottom: 20px;
			margin-left: 30rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
		}

		.servetext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #E8A700;
			line-height: 33rpx;
			text-align: left;
			margin-left: 30rpx;
		}

		.serveFG {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.heng {
				width: 200rpx;
				height: 1rpx;
				background-color: #F6F6F6;
			}
		}

		.content {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 33rpx;
			width: 690rpx;
			margin: 0 auto;
			margin-top: 30rpx;
		}

	}
</style>